<style scoped lang="less">
</style>
<template>
	<iot-blk class="unit-blk" title="物联网单位统计" :moreType="0">
		<div class="chart" id="unitChart"></div>
	</iot-blk>
</template>
<script>
import HighCharts from 'highcharts'
import { mapState } from 'vuex'
export default {
	name: 'HomeHeader',
	props: {
		type: {
    		type: String,
			default: 'fireControl'
    	},
    	data: {
    		type: Object,
			default () {
				return {}
			}
    	},
	},
	computed: {
		...mapState([
			'scale'
		])
	},
	watch: {
		scale () {
			this.renderChart()
		}
	},
	data () {
		return {
			loading: false,
			chartData: null
		}
	},
	methods: {
		renderChart () {
			let width = this.scale*380
			let height = this.scale*200
			let data = this.chartData
			let options = {
				credits:{
					enabled: false
				},
				colors: ['#E8684A','#9270CA','#F6BD16','#6DC8EC'],
				chart: {
					width: width,
					height: height,
					type: 'pie',
					backgroundColor:'transparent',
					spacing: 0,
					margin: [0, 100*this.scale, 0, 0]
				},
				title: {
			        floating:true,
			        text: '',
			        useHTML: true,
			        style: {
			        	color:"#89F8FF",
			        	fontSize:12*this.scale+'px'
			        }
			    },
				plotOptions: {
					pie: {
						innerSize: '60%',
						dataLabels: {
							enabled: true,
							allowOverlap: true, // 允许数据标签重叠
							color:"#AFECFF",
							borderWidth: 0,
							style:{
								fontSize:12*this.scale+'px'
							},
							distance: 20*this.scale,
							format: '{point.name}<br>{point.y}',
						},
						borderWidth: 0,
						showInLegend: true
					}
				},
				series: [{
					name: '数量',
					data: data
				}],
				legend: {
					enabled: true,
					align: 'right',
					layout: 'vertical',
					floating: true,
					verticalAlign: 'middle',
					itemStyle:{
						color:"#AFECFF",
						fontSize:12*this.scale+'px'
					},
					itemMarginTop: 10*this.scale,
					itemHoverStyle: {
						color:"#ffffff"
					},
				}
			}
			HighCharts.chart('unitChart',options, function(c) { // 图表初始化完毕后的会掉函数
			    // 环形图圆心
			    let centerX = c.series[0].center[0]
			    let centerY = c.series[0].center[1]
			    let titleHeight = parseInt(c.title.styles.fontSize);
			    // 动态设置标题位置
			    c.setTitle({
			        y:centerY + titleHeight/2,
			        // text: "<font size='"+(30*this.scale)+"'>104<font><p>联网单位(家)</p>"
			    });
			})
		},

		setGasData () {
			let names = this.data.map(item=>item.businessName)
			let values = this.data.map(item=>item.count)
      		let chartData = []
			names.forEach((item,index)=>{
				chartData.push([item,values[index]])
			})
			this.chartData = chartData
		}
	},
	mounted () {
		// if(this.type=='gas'){
		// 	this.setGasData()
		// }
		this.chartData = [
			['九小场所', this.data.nineSmall],
			['消防一般', this.data.commonly],
			['消防重点', this.data.important],
			['其他', this.data.other]
		]
		if(this.chartData){
			this.renderChart()
		}
	},
}
</script>